<template>
    <div>
        <!-- 面包屑 -->
        <el-bread></el-bread>
        <el-button type="primary" plain size="small" class="addBtn" @click="addDialog">添加</el-button>
        <!-- 表格 数据列表 -->
        <v-list @edit="edit"></v-list>
        <!-- 弹框组件 -->
        <v-dialog :isShow="isShow" :isAdd="isAdd" ref="diaRef" @cancel="cancel"></v-dialog>
    </div>
</template>
<script>
// 引入封装好的list组件
import vList from './list.vue'
// 引入封装好的弹框组件
import vDialog from './dialog.vue'
export default {
    data() {
        return {
            isShow:false,  //控制组件显示隐藏
            isAdd:true
        }
    },
    methods: {
        // 添加点击事件 出现弹框
        addDialog(){
            this.isShow=true
            this.isAdd=true
        },
        // 封装一个子组件关闭父组件弹框的事件
        cancel(e){
            this.isShow=e
        },
        // 封装一个编辑打开弹框事件
        edit(e){
            // 打开弹窗
            this.isShow=true
            this.isAdd=false  //告诉弹框这是编辑
            this.$refs.diaRef.lookup(e)
        }
    },
    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {
        vList,
        vDialog
    }
}
</script>
<style scoped>
.addBtn {
    margin: 15px;
}
</style>